<script setup lang="ts">
import { provide, reactive } from 'vue';
import {myStore} from '@/store/my'
import PersonAdvantagePopup from './PersonAdvantagePopup.vue'
const store = myStore()
const props = defineProps({
    page: {
        type: String
    }
})
const state = reactive({
  show: false
})
const closeChange = () => {
  state.show = false
  store.getResumeDetails()
}
provide('popup', {
    closeChange
})
</script>

<template>
    <div class="resume-label">
        <h3>个人优势<van-icon name="edit" @click="state.show=true" v-if="props.page!=='preview'" /></h3>
        <label>{{ store.state.resumeInfo.advantage || '请填写个人优势' }}</label>
    </div>
    <!-- 切换弹窗 -->
    <van-popup 
            v-model:show="state.show" 
            position="top"
            duration="0"
            :style="{ height: '100%', width: '100%' }" 
        >
            <PersonAdvantagePopup />
    </van-popup>
</template>
<style scoped>
.resume-label h3{
    display: flex;
    align-items: flex-end;
}
.resume-label img{
    width: 1rem;
    height: 1rem;
    margin-left: 0.32rem;
}
</style>